<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/post.css">
    <script src="../static/echarts.min.js"></script>
</head>

<main>
    <div class="title">
        <span>职位分析</span>
    </div>
    <hr>
    <div class="main-container">
        <form action="{{ url_for('postinfo') }}" name="searchJob" method="post" id="form">
            <div class="search">
                <div class="search-box"><input type="text" placeholder="请输入职位" name="job_name"></div>
                <div class="search-icon"><i class="iconfont icon-sousuo"></i></div>
            </div>
        </form>
        <br/>
        <div class="result-box" id="show" style="display:none;">
            <div id="res1" class="result-chart" style="width: 500px;height: 450px"></div>
            <script>
                var myChart1=echarts.init(document.getElementById('res1'));
                var option = {
                        title: {text: '{{ job_name }}--城市需求数量图',x: 'center',y: '95%',textStyle: {fontsize:12,fontWeight: "bold"}},
                        tooltip: {},
                        legend: {},
                        xAxis: {
                            data: [{% for item in place %} "{{item[0]}}", {% endfor %}]
                            },
                        yAxis: {},
                        series: [{
                        data: [{% for item in place %}{{item[1]}},{% endfor%}],
                            type: 'scatter',
                        }]                       
                    };
                myChart1.setOption(option);
            </script>
            <hr>
            <div id="res2"  class="result-chart" style="width: 500px;height: 450px"></div>
            <script type="text/javascript">
                var myChart2 = echarts.init(document.getElementById('res2'));
                myChart2.setOption({
                title: {
                    text: '{{ job_name }}--公司薪资分布饼图',x: 'center',y: '95%',textStyle: {fontsize:12,fontWeight: "bold"}
                    },
                series : [
                {   color: ['#3291e1','#FF69B4','#91c7ae',  '#CD5C5C','#FFA500', '#c873d3', '#61f8ff', '#FFB6C1','#3dfa57','#749f83','#FFD700', '#808080','#d2f09b', '#61a0a8', '#d48265', '#749f83', '#ca8622','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    name: 'test',
                    center:['50%','35%'],
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    label:{
                            normal:{
                                formatter:'{d}%',
                                textStyle : {
                                    fontWeight : 'normal',
                                    fontSize : 10
                                }
                            }
                        },
                    data:[{% for item in salary_min %}{value:{{item[1]}}, name:'{{item[0]}}'},{% endfor %}]
                }],
                legend:{
                    // orient:'vertical',
                    left:'10',
                    bottom:'20',
                    width:450,
                    data:[
                    {% for item in salary_min %}
                        '{{item[0]}}',
                    {% endfor %}
                    ],
                    formatter:[
                        '{a|{name}}'
                    ].join('\n'),
                    textStyle:{
                        rich:{
                            a:{
                                width:70,
                                fontSize:10,
                                lineHeight:10
                            }
                        }
                    }
                }
            })
            </script>
        </div>
    </div>
</main>
    <script type="text/javascript">
        var btn = document.getElementsByClassName('search-icon')[0];
        var form = document.getElementById('form');        
        btn.addEventListener('click',function () {
            form.submit();
        });    
    </script>
    <script type="text/javascript">
        if({{flag}}==1) {
            document.getElementById('show').style.display = "block";
        }
    </script>
</html>